import React from "react";
import { useTranslation } from "react-i18next";
import AdminLayout from "@/user.InterfaceLayer/Libraries/Layouts/Admin.layout";
import Link from "next/link";

interface OrderPageProps {
  orders?: any;
}

const OrdersPage: React.FC<OrderPageProps> = (props) => {
  const { t } = useTranslation();
  const { orders } = props;

  let isLoading = false;
  let error = false;

  return (
    <AdminLayout
      title={t("AdminPage.title.orders")}
      isLoading={isLoading}
      error={error}
      block={
        <div className="overflow-x-auto">
          <table className="min-w-full">
            <thead className="border-b">
              <tr>
                <th className="px-5 text-left">ID</th>
                <th className="p-5 text-left">USER</th>
                <th className="p-5 text-left">DATE</th>
                <th className="p-5 text-left">TOTAL</th>
                <th className="p-5 text-left">PAID</th>
                <th className="p-5 text-left">DELIVERED</th>
                <th className="p-5 text-left">ACTION</th>
              </tr>
            </thead>
            <tbody>
              {orders?.map((order: any) => (
                <tr key={order._id} className="border-b">
                  <td className="p-5">{order._id.substring(20, 24)}</td>
                  <td className="p-5">
                    {order.user ? order.user.name : "DELETED USER"}
                  </td>
                  <td className="p-5">{order.createdAt.substring(0, 10)}</td>
                  <td className="p-5">${order.totalPrice}</td>
                  <td className="p-5">
                    {order.isPaid
                      ? `${order.paidAt.substring(0, 10)}`
                      : "not paid"}
                  </td>
                  <td className="p-5">
                    {order.isDelivered
                      ? `${order.deliveredAt.substring(0, 10)}`
                      : "not delivered"}
                  </td>
                  <td className="p-5">
                    <Link href={`/order/${order._id}`} passHref>
                      Details
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      }
    />
  );
};
export default OrdersPage;
